<template>
	<view class="page mine">
		<view class="content" @click="onModifyInfo()">
			<head-image :name="userInfo.nickName" :url="userInfo.headImage" :size="160"></head-image>
			<view class="info-item">
				<view class="info-primary">
					<text class="info-username" :style="userInfo.role ? 'color: #FFD700;' : ''">
						{{ userInfo.nickName }}
					</text>
					<uni-icons v-show="userInfo.sex==0" class="sex-boy" type="person-filled" size="26"
						color="#2782D7"></uni-icons>
					<uni-icons v-show="userInfo.sex==1" class="sex-girl" type="person-filled" size="26" color="#F76260">
					</uni-icons>
				</view>
				<text style="margin-top: 6rpx; font-size: 26rpx; color: #4D4D4D">
					账号 ：{{ userInfo.userName }}
				</text>
				<text class="signature" style="margin-top: 6rpx; font-size: 26rpx; color: #4D4D4D">
					签名 ：{{ userInfo.signature }}
				</text>
			</view>

			<uni-icons color="rgb(181, 181, 181)" type="right" size="30"></uni-icons>
		</view>
		<view class="btn-group">
			<!--      <view @click="onApprovalList()" class="btn-group-item">-->
			<!--        <view class="">-->
			<!--          <image src="../../static/image/circle_apply.png" mode=""></image>-->
			<!--          新的圈子成员-->
			<!--          <uni-badge style="vertical-align: bottom;" :text="circleApply"/>-->
			<!--        </view>-->
			<!--        <uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>-->
			<!--      </view>-->

			<view @click="onSetting()" class="btn-group-item">
				<view class="">
					<image src="../../static/image/setting.png" mode=""></image>
					设置
				</view>
				<uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>
			</view>

<!--			<view @click="onMyMoment()" class="btn-group-item">-->
<!--				<view class="">-->
<!--					<image src="../../static/image/moment.png" mode=""></image>-->
<!--					我的动态-->
<!--					<uni-badge style="vertical-align: bottom;" />-->
<!--				</view>-->
<!--				<uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>-->
<!--			</view>-->

      <view @click="onMyStar()" class="btn-group-item">
        <view class="">
          <image src="../../static/image/svg/mine_star.svg" mode=""></image>
          我的收藏
          <uni-badge style="vertical-align: bottom;" />
        </view>
        <uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>
      </view>

			<!--      <view @click="onMyNote()" class="btn-group-item">-->
			<!--        <view class="">-->
			<!--          <image src="../../static/image/bijiben.png" mode=""></image>-->
			<!--          我的笔记-->
			<!--        </view>-->
			<!--        <uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>-->
			<!--      </view>-->
			<!--			<view @click="onMyInviteCode()" class="btn-group-item">-->
			<!--				<view class="">-->
			<!--					<image src="../../static/image/invitecode.png" mode=""></image>-->
			<!--					我的邀请码-->
			<!--				</view>-->
			<!--				<uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>-->
			<!--			</view>-->
			<!--      <view @click="onMyTalk()" class="btn-group-item">-->
			<!--        <view class="">-->
			<!--          <image src="../../static/image/talk.png" mode=""></image>-->
			<!--          聊天链接-->
			<!--        </view>-->
			<!--        <uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>-->
			<!--      </view>-->

			<view @click="onModifyPassword()" class="btn-group-item" style="margin-top: 20rpx;margin-bottom: 20rpx;">
				<view class="">
					<image src="../../static/image/password.png" mode=""></image>
					修改密码
				</view>
				<uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>
			</view>

			<view class="btn-group-item" style="margin-top: 20rpx;margin-bottom: 20rpx;" @click="checkUpdate()">
				<view class="">
					<image src="../../static/image/update.png" mode=""></image>
					检查更新 v{{versionName}}
				</view>
				<uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>
			</view>

			<view @click="onQuit()" class="btn-group-item">
				<view class="">
					<image src="../../static/image/quit.png" mode=""></image>
					退出
				</view>
				<uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>
			</view>
			
			<view @click="golres" class="btn-group-item">
				<view class="">
					<image src="../../static/image/quit.png" mode=""></image>
					入口
				</view>
				<uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>
			</view>

		</view>
		
		<view class="footer">
			<view class="mainbotm">
				<view class="onehome oenmy" @click="goabbar(0)">
					<image src="/static/datab/0.png" mode=""></image>
					<!-- 	<view class="teben">
						聊天
					</view> -->
				</view>
				<view class="onehome oenmy" @click="goabbar(1)">
					<image src="/static/datab/1.png" mode=""></image>
					<!-- 	<view class="teben">
						首页
					</view> -->
				</view>
				<view class="onehome oenmy" @click="goabbar(2)">
					<image src="/static/datab/2.png" mode=""></image>
					<!-- 	<view class="teben">
						首页
					</view> -->
				</view>
				<view class="onehome  acti" >
					<image src="/static/datab/44.png" mode=""></image>
					<view class="teben">
						我的
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import friendStore from "../../store/friendStore";
	import http from "@/common/request";
	import {
		versionName
	} from '@/manifest.json'
	export default {
		data() {
			return {
				versionName: versionName
			}
		},
		onReady() {
		  // 隐藏TabBar
		  uni.hideTabBar();
		},
		methods: {
			goabbar(i) {
				switch (i) {
					case 0:
						uni.switchTab({
							url: '/pages/chat/chat'
						})
						break;
					case 1:
						uni.switchTab({
							url: '/pages/friend/friend'
						})
						break;
					case 2:
					
						break;
					case 3:
						uni.switchTab({
							url: '/pages/mine/mine'
						})
			
						break;
			
				}
			},
			
			golres(){
			uni.navigateTo({
				url:'/pages/lug/loginreg/reg'
			})	
			},
			
			onMyMoment() {
				uni.navigateTo({
					url: "/pages/mine/mine-moment"
				});
			},

      onMyStar() {
        uni.navigateTo({
          url: "/pages/mine/mine-star"
        });
      },

			onApprovalList() {
				uni.navigateTo({
					url: "/pages/mine/circle-apply"
				});
			},
			onSetting() {
				uni.navigateTo({
					url: "/pages/mine/setting"
				});
			},
			onMyInviteCode() {
				uni.navigateTo({
					url: "/pages/mine/mine-inviteCode"
				});
			},
			onLockAccount() {
				uni.navigateTo({
					url: "/pages/mine/mine-lock"
				});
			},
			onModifyInfo() {
				uni.navigateTo({
					url: "/pages/mine/mine-edit"
				})
			},
			onModifyPassword() {
				uni.navigateTo({
					url: "/pages/mine/mine-password"
				})
			},

			getLatestAppVersion() {
				return new Promise((resolve, reject) => {
					http({
						url: `/mine/latestVersion`,
						method: 'GET'
					}).then((res) => {
						resolve(res);
					})
				})

			},

			checkUpdate() {
				// #ifdef APP-PLUS
				this.getLatestAppVersion().then((res) => {
					if (res) {
						let versionData = JSON.parse(res.paramValue)
						console.log('最新版本为：', versionData.version)
						let oldVersion = versionName.replace(".", "")
						let newVersion = versionData.version.replace(".", "")
						if (oldVersion >= newVersion) {
							uni.showModal({
								content: '当前已经是最新版本',
								showCancel: false,
							})
						} else if (newVersion > oldVersion) {
							uni.navigateTo({
								url: '/pages/mine/upgrade?versionName=' + versionData.version + '&isForce=' + versionData
									.is_force,
								events: {
									// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
									acceptDataFromOpenedPage: function(data) {},
									someEvent: function(data) {}
								},
								success: function(res) {
									// 通过eventChannel向被打开页面传送数据
									res.eventChannel.emit('acceptDataFromOpenerPage', versionData)
								},
								fail: function(error) {}
							})
						}
					}
				}).catch((e) => {
					console.error(e)
				})
				// #endif
			},

			onMyNote() {
				uni.navigateTo({
					url: "/pages/mine/mine-note"
				})
			},
			onMyTalk() {
				uni.navigateTo({
					url: "/pages/mine/mine-talk"
				})
			},
			onQuit() {
				uni.showModal({
					title: '确认退出?',
					success: (res) => {
						if (res.confirm) {
							getApp().$vm.exit()
						}
					}
				});
			}
		},

		computed: {
			friendApply() {
				return this.userStore.minePending.friendApply
			},
			// circleApply() {
			// 	return this.userStore.minePending.circleApply
			// },
			userInfo() {
				return this.userStore.userInfo;
			}
		},

		// onShow() {
		// 	if (this.userStore.minePending.count > 0) {
		// 		uni.setTabBarBadge({
		// 			index: 4,
		// 			text: this.userStore.minePending.count
		// 		})
		// 	} else {
		// 		uni.removeTabBarBadge({
		// 			index: 4
		// 		});
		// 	}
		// },

	}
</script>

<style scoped lang="scss">
	// 高亮选择
	.acti {
		background: rgba(248, 239, 249, 1);
		height: 75%;
		padding: 0 50rpx;
		border-radius: 100rpx;
	
	}
	
	.mainbotm {
		height: 128rpx;
		// margin: 0 40rpx 40rpx;
		padding: 0 30rpx 30rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		box-shadow: 0px 6px 16px 0px #21465414;
	
	
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.oenmy {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 140rpx;
		height: 96rpx;
		vertical-align: middle;
		border-radius: 50%;
		// background-color: #f7f8fa;
	}
	
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	
		// background-color: rgba(255, 255, 255, );
		// height: 200rpx;
	
		backdrop-filter: blur(4rpx);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, .1) -30%, rgba(255, 255, 255, .1) 50%);
		// padding: 20rpx;
	
	
	
		// backdrop-filter: blur(6px);
		//     background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) -30%, rgba(255 ,255, 255, .5) 50%);
	
	}
	
	.onehome {
		display: flex;
		align-items: center;
	
		image {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}
	
		.teben {
			margin-left: 10rpx;
			color: rgba(251, 117, 214, 1);
			font-size: 28rpx;
			font-weight: bold;
		}
	}
	
	
	.mine {
		background-color: #ededed;

		.content {
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background-color: white;

			.info-item {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				padding-left: 40rpx;
				flex: 1;

				.signature {
					margin-top: 12rpx;
					display: -webkit-box;
					/* 使其成为一个伸缩容器 */
					-webkit-box-orient: vertical;
					/* 设置子元素的排列方向为垂直 */
					overflow: hidden;
					/* 超出部分隐藏 */
					-webkit-line-clamp: 3;
					/* 限制最多显示3行 */
					text-overflow: ellipsis;
					/* 文字超出部分显示省略号 */
				}

				.info-primary {
					display: flex;
					align-items: center;

					.info-username {
						font-size: 40rpx;
						font-weight: 600;


					}
				}
			}

			.info-arrow {
				width: 50rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
		}

		.btn-group {
			margin-top: 20rpx;

			.btn-group-item {
				font-size: 28rpx;
				background-color: white;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 33rpx 33rpx;
				border-bottom: 1px #eee solid;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 20rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>